<template>
	<view class="">
		<view class="" style="padding-top: 20rpx">
			<view class="item" :class="{ on: findex == index }" v-for="(item, index) in list" :key="index" @click="change(index, item)">
				<view class="top u-flex u-col-center">
					<block v-if="types == 'release' || types == 'release2'">
						<image src="../../static/c6.png" mode="aspectFill" v-if="findex == index"></image>
						<image src="../../static/c1.png" mode="aspectFill" v-else></image>
					</block>
					<text>{{ item.gameZoneName }}</text>
				</view>
				<view class="i u-flex u-col-center u-row-between">
					<view class="l">角色ID</view>
					<view class="r">
						{{ item.account }}
					</view>
				</view>
				<view class="i u-flex u-col-center u-row-between">
					<view class="l">微信号</view>
					<view class="r">
						{{ item.wechat }}
					</view>
				</view>
				<view class="i u-flex u-col-center u-row-between">
					<view class="l">手机号</view>
					<view class="r">
						{{ item.phone }}
					</view>
				</view>
				<view class="footer u-flex u-col-center u-row-between">
					<view class="l u-flex u-col-center u-row-left" @click.stop="setDefault(item)">
						<image src="../../static/c4.png" mode="aspectFill" v-if="item.isDefault == 1"></image>
						<image src="../../static/c3.png" mode="aspectFill" v-else></image>

						<text :style="{ color: item.isDefault == 1 ? '#FF6F07' : '' }">{{ item.isDefault == 1 ? '已默认' : '设为默认' }}</text>
					</view>
					<view class="r u-flex u-col-center u-row-right">
						<view class="btn" @click.stop="open(item.id)">删除</view>
						<view class="btn" @click.stop="pageTo(`/pages/user/address?type=edit&id=${item.id}`, item)">修改</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nolist" v-if="nolist">
			<image src="/static/kong4.png" mode="aspectFill"></image>
			<text>暂无信息</text>
		</view>
		<view class="" style="height: 200rpx"></view>
		<view class="footer_btn">
			<view class="cont">
				<view class="btn" @click="$pageTo(`/pages/user/address?type=add`)">新增信息</view>
			</view>
		</view>
	</view>
</template>

<script>
import { accountList, delAccountList, userSaccountEdit } from '@/common/http.api.js';
export default {
	data() {
		return {
			show: false,
			id: '',
			findex: -1,
			types: '',
			sid: '',
			status_up: '',
			status: '',
			upday: '',
			from: '',
			type: '',
			name: '',
			price: '',
			image: '',

			list: [],
			nolist: false,
			params: {
				page: 1
			}
		};
	},
	onLoad(o) {
		this.types = o.types;
		this.from = o.from;
		if (this.types == 'release2') {
			this.sid = o.id;
			this.status_up = o.status_up;
			this.status = o.status;
			if (this.status_up == 3 && this.status == 3) {
				this.upday = o.upday;
			}
			this.type = o.type;
			this.name = o.name;
			this.price = o.price;
			this.image = o.image;
		}
	},
	onShow() {
		this.list = [];
		this.params.page = 1;
		this.getlist();
	},
	onReachBottom() {
		console.log('13');
	},
	methods: {
		getlist() {
			accountList(this.params).then((res) => {
				if (res.code == 200) {
					this.list.push(...res.data.list);
					this.nolist = this.list.length == 0;
					if (this.types == 'release' && uni.getStorageSync('addressData')) {
						let id = uni.getStorageSync('addressData').id;
						this.findex = this.list.findIndex((item) => item.id == id);
					}
				}
			});
		},
		pageTo(url, data) {
			uni.setStorageSync('editAddressData', data);
			uni.navigateTo({
				url: url
			});
		},
		setDefault(data) {
			if (data.isDefault == 0) {
				data.is_default = 1;
				data.game_zone_name = data.gameZoneName;
				userSaccountEdit(data).then((res) => {
					if (res.code == 200) {
						this.$modal.msg('修改成功');
						this.list = [];
						this.params.page = 1;
						this.getlist();
					}
				});
			}
		},
		open(id) {
			this.$modal
				.confirm('是否要删除当前数据？', '删除提示')
				.then(() => {
					return delAccountList(id);
				})
				.then(() => {
					this.$modal.msgSuccess('删除成功');
					this.list = [];
					this.params.page = 1;
					this.getlist();
				})
				.catch(() => {});
		},
		change(index, item) {
			if (this.types == 'release' || this.types == 'release2') {
				this.findex = index;
				uni.setStorageSync('addressData', item);
				if (this.types == 'release') {
					uni.navigateBack();
				}
				if (this.types == 'release2') {
					uni.navigateTo({
						url: `/pages/index/edit2?id=${this.sid}&status=${this.status}&status_up=${this.status_up}&upday=${this.upday}&type=${this.type}&price=${this.price}&name=${this.name}&image=${this.image}&from=${this.from}`
					});
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.item {
	width: 690rpx;
	margin: 0rpx auto 20rpx;
	padding: 20rpx;
	border-radius: 20rpx;
	background-color: #fff;
	box-sizing: border-box;
	border: 1px solid #fff;

	.footer {
		margin-top: 10rpx;

		.l {
			image {
				width: 40rpx;
				height: 40rpx;
			}

			text {
				font-size: 24rpx;
				color: #979797;
				margin-left: 20rpx;
			}
		}

		.r {
			.btn {
				width: 82rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				background: #f5f5f5;
				border-radius: 8rpx;
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #979797;
			}
		}
	}

	.i {
		height: 60rpx;
		line-height: 60rpx;

		.l {
			color: #979797;
			font-size: 28rpx;
		}

		.r {
			flex: 1;
			width: 1rpx;
			margin-left: 20rpx;
			color: #11192d;
			font-size: 28rpx;
			text-align: right;
		}
	}

	.top {
		height: 40rpx;
		line-height: 40rpx;
		margin-bottom: 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		text {
			font-size: 32rpx;
			color: #11192d;
		}
	}
}

.on {
	border: 2rpx solid #ff6f07;
}

.nolist {
	padding: 200rpx 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	image {
		width: 360rpx;
		height: 236rpx;
	}
	text {
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
	}
}

.m-pop2 {
	width: 620rpx;
	height: 400rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	box-sizing: border-box;
	padding: 60rpx 40rpx 20rpx;

	.t {
		line-height: 44rpx;
		height: 44rpx;
		font-size: 40rpx;
		color: #000000;
		text-align: center;
		font-weight: 600;
	}

	.p {
		margin-top: 60rpx;
		line-height: 44rpx;
		height: 44rpx;
		font-size: 32rpx;
		color: #000000;
		text-align: center;
	}

	.btns {
		width: 100%;
		margin-top: 50rpx;

		.btn {
			text-align: center;
			font-size: 32rpx;
			width: calc(50% - 10rpx);
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 20rpx;
		}

		.btn1 {
			background: #f9f9f9;
			color: #d1cdcd;
		}

		.btn2 {
			color: #fff;
			background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
		}
	}
}

.f-btn {
	position: fixed;
	left: 30rpx;
	right: 30rpx;
	bottom: 30rpx;
	line-height: 100rpx;
	text-align: center;
	font-size: 32rpx;
	color: #fff;
	font-weight: 600;
	height: 100rpx;
	background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
	border-radius: 20rpx;
}
</style>
